<template>
  <el-dialog title="选择商品" :model-value="show" width="1000" :before-close="handleClose" :close-on-click-modal="false"
    :close-on-press-escape="false">
    <SeachTable @handleSelectionChange="handleSelectionChange" class="mySeachTable" :tableSelection="true" :tableType="1"
      ref="seachTable" :forms="tableForms" :tableLoading="tableLoading" :tableConfig="tableConfig" :tableData="tableData"
      :totalPage="total" @handlerSearch="handlerSearch">
    </SeachTable>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { useAction } from '../Hooks/action.js'
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
const { rangeActivityList, tableForms, tableConfig } = useAction()
const tableLoading = ref(false)
const tableData = ref([{
  id: 1,
  productName: '商品名称',
  price: 10,
  inventory:100
}])
const total = ref(0)
const handlerSearch = async (data) => {
  console.log('data', data)
  try{
    tableLoading.value = true
    // const res = await rangeActivityList(data)
    const res = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          data: Array(20).fill().map((item, index) => {
            return {
              id: index,
              productName: '商品名称'+index,
              price: 10+index,
              inventory:100+index
            }
          }),
          total: 20
        })
      }, 1000)
    })
    console.log('res', res)
    tableData.value = res.data
    total.value = res.total
  }finally{
    tableLoading.value = false
  }
}
const selectionList = ref([])
const handleSelectionChange = (val) => {
  console.log('val', val)
  selectionList.value = val
}
const emit = defineEmits(['close'])
const handleClose = () => {
  emit('close', false)
}
const confirm = () => {
  rangeActivityList.value = selectionList.value
  handleClose()
}

</script>

<style lang="less" scoped>
  .mySeachTable{
    height: 458px !important;
    :deep(.search-table){
      .btn-area,.line-block{
        display: none;
      }
      .table{
        height: calc(100% - 110px) !important;
      }
      .jg{
        display: none;
      }
    }
  }
</style>